<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Tags : Ionize User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='Ionize Dev Team' />
<meta name='description' content='Ionize User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2" onclick="myHeight.toggle();"><a name="top"></a><a href="javascript:void(0);"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>Ionize User Guide Version 0.9.7</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://www.ionizecms.com/">Ionize Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Navigation Tags
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ionizecms.com/user-guide" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">

<h1>Navigation Tags</h1>

<p>Navigation tags use helpers to display the navigation. These standard helpers can be customized or unactivated.</p>


<h2>navigation</h2>

<p>Coupled to a helper function, displays one level of one menu navigation.</p>

<p>Default used helper : <dfn>/application/helpers</dfn>/<kbd>navigation_helper.php</kbd>/<var>get_navigation()</var></p>

<h3>Basic example</h3>
<pre>
<dfn>&lt;!-- Sample code --></dfn>
&lt;ion:navigation level="0" active_class="active" menu="my_menu" tag="ul" id="my_nav" class="nav" />

<dfn>&lt;!-- Example of result --></dfn>
&lt;ul id="my_nav" class="nav">
   &lt;li class="active">&lt;a class="active" href="http://my_domain.tld/home/">Home&lt;/a>&lt;/li>
   &lt;li>&lt;a href="http://my_domain.tld/service/">Our Services&lt;/a>&lt;/li>
   &lt;li>&lt;a href="http://my_domain.tld/about/">About our company&lt;/a>&lt;/li>
&lt;/ul>
</pre>

<h3>Without helper (child tags must be used)</h3>
<pre>
&lt;ion:navigation level="0" active_class=' class="active"' menu="my_menu" tag="ul" id="my_nav" class="nav" <strong>no_helper="true"</strong>>

	&lt;li&lt;ion:active_class/>>&lt;a href="&lt;ion:url/>">&lt;ion:title/>&lt;/a>&lt;/li>

&lt;/ion:navigation>
</pre>



<h3>Attributes</h3>
<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
	<th>Attribute</th>
	<th>Optional</th>
	<th>Values</th>
</tr>
<tr>
	<td class="td"><kbd>level</kbd></td>
	<td class="td">no</td>
	<td class="td">The wished displayed level. Start at <strong>0</strong>.</td>
</tr>
<tr>
	<td class="td">menu</td>
	<td class="td">yes</td>
	<td class="td">
		The wished displayed menu. See <a href="../general/menus.html">Ionize Menus Documentation</a> for more information about menus.<br/>
		Default value : <strong>main</strong>
	</td>
</tr>
<tr>
	<td class="td">tag</td>
	<td class="td">yes</td>
	<td class="td">Puts the results into the given tag</td>
</tr>
<tr>
	<td class="td">id</td>
	<td class="td">yes</td>
	<td class="td">Adds the HTML <strong>id</strong> attribute to the produced tag.</td>
</tr>
<tr>
	<td class="td">class</td>
	<td class="td">yes</td>
	<td class="td">Adds the HTML <strong>class</strong> attribute to the produced tag.</td>
</tr>
<tr>
	<td class="td">helper</td>
	<td class="td">yes</td>
	<td class="td">
		<strong>&lt;Name of the helper>:&lt;function></strong> to use to display the navigation menu.<br/>
		This is another way to implement your own helper to display the navigation.<br/>
		If your helper file is called <kbd>my_navigation_menu.php</kbd> and your helper function is named <kbd>my_navigation_func()</kbd>, you will write :
		&lt;ion:languages helper="my_navigation_menu:my_navigation_func" />
	</td>
</tr>
<tr>
	<td class="td">display_hidden</td>
	<td class="td">yes</td>
	<td class="td">
		<strong>true / false</strong><br/>
		Default : <strong>false</strong><br/>
		If set to <strong>true</strong>, displays the navigation elements even the "Display in Navigation" is not checked in Ionize.
	</td>
</tr>
</table>


<h2>tree_navigation</h2>

<p>A tree based navigation menu, as a unordered HTML list (&lt;ul>...&lt;/ul>).</p>

<p>Default used helper : <dfn>/application/helpers</dfn>/<kbd>navigation_helper.php</kbd>/<var>get_tree_navigation()</var></p>

<pre>
<dfn>&lt;!-- Sample code --></dfn>
&lt;ion:tree_navigation level="0" depth="2" active_class="active" menu="my_menu" tag="ul" id="my_nav" class="nav" /> 

<dfn>&lt;!-- Example of result --></dfn>
&lt;ul id="my_nav" class="nav">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="home">Home&lt;/a>&lt;/li>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="active">&lt;a href="services">Our Services&lt;/a>&lt;/li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="active">&lt;a class="active" href="webdesign">Webdesign&lt;/a>&lt;/li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="coding">Coding&lt;/a>&lt;/li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="about">About us&lt;/a>&lt;/li>
&lt;/ul>
</pre>

<h3>Attributes</h3>
<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
	<th>Attribute</th>
	<th>Optional</th>
	<th>Values</th>
</tr>
<tr>
	<td class="td"><kbd>level</kbd></td>
	<td class="td">no</td>
	<td class="td">The wished displayed level. Start at <strong>0</strong>.</td>
</tr>
<tr>
	<td class="td"><kbd>depth</kbd></td>
	<td class="td">no</td>
	<td class="td">
		Depth you want your menu to go.<br/>
		"2" means 2 levels, including the starting level.
	</td>
</tr>
<tr>
	<td class="td">menu</td>
	<td class="td">yes</td>
	<td class="td">
		The wished displayed menu.<br/>
		Default value : <strong>main</strong>
	</td>
</tr>
<tr>
	<td class="td">tag</td>
	<td class="td">yes</td>
	<td class="td">Puts the results into the given tag</td>
</tr>
<tr>
	<td class="td">id</td>
	<td class="td">yes</td>
	<td class="td">Adds the HTML <strong>id</strong> attributes to the produced tag.</td>
</tr>
<tr>
	<td class="td">class</td>
	<td class="td">yes</td>
	<td class="td">Adds the HTML <strong>class</strong> attributes to the produced tag.</td>
</tr>
<tr>
	<td class="td">helper</td>
	<td class="td">yes</td>
	<td class="td">
		<strong>&lt;Name of the helper>:&lt;function></strong> to use to display the navigation menu.<br/>
		This is another way to implement your own helper to display the navigation.<br/>
		If your helper file is called <kbd>my_navigation_menu.php</kbd> and your helper function is named <kbd>my_navigation_func()</kbd>, you will write :
		&lt;ion:languages helper="my_navigation_menu:my_navigation_func" />
	</td>
</tr>
<tr>
	<td class="td">display_hidden</td>
	<td class="td">yes</td>
	<td class="td">
		<strong>true / false</strong><br/>
		Default : <strong>false</strong><br/>
		If set to <strong>true</strong>, displays the navigation elements even the "Display in Navigation" is not checked in Ionize.
	</td>
</tr>
</table>


<h2>Customize the navigation menu</h2>

<p>Navigation tags are coupled to helpers functions, located in : <dfn>/application/helpers/navigation_helper.php</dfn></p>
<p>If you wish to create your own helper to display the menu in a different way, just copy this file to : <var>/themes/your_theme/helpers/</var> and modify it.</p>
<p>The tag will automatically take your helper instead the default one.</p>

<p><strong>To customize the &lt;ion:navigation /> tag</strong> : Modify the function : <dfn>get_navigation()</dfn></p>
<p><strong>To customize the &lt;ion:tree_navigation /> tag</strong> : Modify the function : <dfn>get_tree_navigation()</dfn></p>


</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="general_tags.html">General Tags</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="language_tags.html">Language Tags</a>
</p>
<p><a href="http://www.ionizecms.com/">Ionize website</a></p>
</div>

</body>
</html>